import React, { memo } from 'react';

import { getSizeImage } from 'utils/format-util'

import { AlbumWrapper } from './style'

const MXAlbumCover = memo((props) => {
  const { info, width = 153, size = 130, bgp = '-845ox' } = props

  return (
    <AlbumWrapper size={size} width={width} bgp={bgp}>
      <div className="album-image">
        <img src={getSizeImage(info.picUrl, size)} alt={info.name}/>
        <a href="/todo" className="cover image_cover"> </a>
      </div>
      <div className="album-info">
        <div className="name text-nowrap">{info.name}</div>
        <div className="artist text-nowrap">{info.artist.name}</div>
      </div>
    </AlbumWrapper>
  );
});

export default MXAlbumCover;